<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport"
            content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>
        Realistic buildings with SceneLayer | Sample | ArcGIS API for JavaScript
        4.18
    </title>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>

    <link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css"/>
    <script src="https://js.arcgis.com/4.18/"></script>

    <script>
        require([
            "esri/Map",
            "esri/views/SceneView",
            "esri/layers/SceneLayer"
        ], function (Map, SceneView, SceneLayer) {
            var sceneLayer = new SceneLayer({
                portalItem:{
                    id:"b66b02861afa4e8dbf9655d05bc89afc"
                },
                elevationInfo:{//指定如何在垂直轴 (z) 上放置图形
                    mode:"absolute-height",//绝对高度
                    offset:6
                }
            });

            var map = new Map({
                basemap: "hybrid",
                ground: "world-elevation",
                layers: [sceneLayer]
            });

            var view = new SceneView({
                container: "viewDiv",
                map: map,
                camera:{
                    position: [4.84361, 45.75561, 270],
                    tilt: 82,
                    heading: 304
                },
                lighting:{//光照
                    date:new Date("July 15, 2015 8:00:00 PDT"),
                    directShadowsEnabled:true,//指示是否显示太阳投射的阴影,
                },
                atmosphere: {//大气质量
                    quality: "high"
                }
            });
        });
    </script>
</head>

<body>
<div id="viewDiv"></div>
</body>
</html>
